<template>
  <el-dialog
    title="加入对账单"
    v-model="visible"
    width="65%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <div class="search">
      <el-date-picker
        v-model="searchValue.time"
        type="month"
        placeholder="选择账期时间"
        value-format="YYYY-MM"
        style="width: 50%"
      ></el-date-picker>

      <el-button
        type="primary"
        icon="el-icon-search"
        @click="upsearch"
      ></el-button>
    </div>
    <scTable
      ref="table"
      :apiObj="apiObj"
      :params="params"
      row-key="id"
      stripe
      @selection-change="handleSelection"
    >
      <el-table-column type="selection" width="55">
        <!-- :selectable="checkSelectable" -->
      </el-table-column>
      <el-table-column label="ID" prop="id" width="80" fixed></el-table-column>
      <el-table-column
        label="客户名称"
        prop="customerName"
        min-width="200"
        :show-overflow-tooltip="true"
        fixed
      ></el-table-column>
      <el-table-column label="账期" width="350" :show-overflow-tooltip="true">
        <template #default="scope">
          <p>{{ scope.row.startTime }}--{{ scope.row.endTime }}的账单</p>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="" width="200" fixed="right">
        <template #default="scope">
          <p v-if="scope.row.isFinish === 0" style="color: #ad1025">未完成</p>
          <p v-if="scope.row.isFinish === 1" style="color: #398ee5">已完成</p>
        </template>
      </el-table-column>
    </scTable>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()"
        >加入对账单</el-button
      >
    </template>
  </el-dialog>
</template>

<script>

export default {
  emits: ['success', 'closed'],
  data () {
    return {
      visible: false,
      isSaveing: false,
      selectCustomerLoading: false,
      customerList: [],
      planList: [],
      apiObj: this.$API.finance.bill.getBillList,
      params: {
        isFinish: 0,//1已完成 0未完成
        customerId: null
      },
      height: 'auto',
      searchValue: {
        time: null
      },
      plancollectId: '',//应收账款id
      selection: []
    }
  },
  mounted () {
    this.getCustomerList()
  },

  methods: {
    //显示
    open (row) {
      this.params.customerId = row.customerId
      this.plancollectId = row.id
      this.visible = true
    },
    // 获取客户列表
    async getCustomerList (val) {
      this.selectCustomerLoading = true
      let param = {
        limit: 1000,
        page: 1,
        search: val,
        //settlement: 2//结算方式 1现结 2月结
      }
      let res = await this.$API.customer.getCustomers.get(param)
      this.selectCustomerLoading = false
      this.customerList = res.data
    },
    // 搜索客户
    queryCustomer (val) {
      this.getCustomerList(val)
    },

    // 根据客户id获取对应应收账款列表
    setData () {
      this.apiObj = this.$API.finance.bill.getPlanListByCustomerId
      this.params = {
        customerId: this.form.customerId,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      }

    },
    // 客户选择
    changeCustomer () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.setData()
          this.$refs.table.upData(this.params)
        }
      })
    },
    //搜索
    upsearch () {
      this.$refs.table.upData(this.searchValue)

    },


    // 选择
    handleSelection (list) {
      this.selection = list
      if (list.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(list.pop())

      }

    },


    //表单提交方法
    async submit () {
      if (this.selection.length == 0) {
        this.$message.error("请选择对账单")
        return
      }
      let ids = this.selection.map(item => item.id).join(',')
      let data = {
        billId: ids,
        planIds: this.plancollectId
      }

      this.isSaveing = true
      let res = await this.$API.finance.bill.joinBill.post(data)
      this.isSaveing = false
      if (res.code == 200) {
        this.visible = false
        this.$emit("success")
        this.$message.success("操作成功")
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  width: 50%;
  margin-bottom: 10px;
  :deep(.el-input) {
    margin-right: 10px;
  }
}
</style>
